﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Favorite Movies</title>
    <link rel="stylesheet" href="assets/styles/app.css">
    <script src="assets/scripts/app.js" defer></script>
</head>
<body>
<div id="backdrop"></div>
<div class="modal card" id="add-modal">
    <div class="modal__content">
        <label for="title">Movie Title</label>
        <input type="text" name="title" id="title">
        <label for="image-url">Image URL</label>
        <input type="text" name="image-url" id="image-url">
        <label for="rating">Your Rating</label>
        <input type="number" step="1" max="5" min="1" name="rating" id="rating">
    </div>
    <div class="modal__actions">
        <button class="btn btn--passive">Cancel</button>
        <button class="btn btn--success">Add</button>
    </div>
</div>

<div class="modal card" id="delete-modal">
    <h2 class="modal__title">Are you sure?</h2>
    <p class="modal__content">
        Are you sure you want to delete this item? This action can't be made undone!
    </p>
    <div class="modal__actions">
        <button class="btn btn--passive">No (Cancel)</button>
        <button class="btn btn--danger">Yes</button>
    </div>
</div>


<header>
    <h1>Favorite Movies</h1>
    <button>ADD MOVIE</button>
</header>
<main>
    <section id="entry-text" class="card">
        <p>Your personal movie database!</p>
    </section>
    <ul id="movie-list"></ul>
</main>
</body>
</html>